<template>
    <t-space direction="vertical" style="width: 100%">
        <t-tabs v-model="value" :theme="theme" :scroll-position="scrollPosition" @change="handleChange" size="medium">
            <t-tab-panel v-for="index in 30" :key="index" :value="index + ''" :label="`选项卡${index}`"
                :destroy-on-hide="false" :lazy="true">
                <p style="padding: 25px">选项卡{{ index }}</p>
                {{ content }}
            </t-tab-panel>
        </t-tabs>
    </t-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { TabsProps, TabValue } from 'tdesign-vue-next';
const value = ref('22');
const theme = ref<TabsProps['theme']>('normal');
const scrollPosition = ref<TabsProps['scrollPosition']>('center');

const content = ref("这是默认的东西")

const handleChange = (val: TabValue) => {
    console.log('change', val)
    content.value = `这是选项卡${val}的内容`
}
</script>
